<template>
	<view>
		<Line />
		<view class="login-tel">
			<view class="tel-main">
				<view class="login-form">
					<view class="login-pass form-input">
						<text class="input-text">设置密码</text>
						<input type="password" v-model="userPwd" placeholder="6~16位字符">
					</view>	
					<view class="login-user form-input">
						<text class="input-text">验证码</text>
						<input type="text" placeholder="请输入验证码" v-model="userCode">
						<button class="verification-code" type="primary" plain="true" size="mini" :disabled="disabled"
							@tap="sendCode">{{codeMsg}}</button>
					</view>
				</view>
				<view class="tel" @tap="goNextIndex">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Line from "@/components/Line/Line.vue"
	import $http from "@/common/api/request.js"
	export default {
		data() {
			return {
				codeNum: 60,
				codeMsg: "",
				disabled: false,
				userCode: "",
				phone: '',
				code:NaN,
				userPwd:'',
				//验证的规则
				rules:{
					userPwd:{
						rule:/^[0-9a-zA-Z]{6,16}$/,
						msg:"密码应该为6~16位字符"
					}
				}
			};
		},
		onLoad(e) {
			this.phone = e.phone
		},
		onReady() {
			this.codeMsg = `重新发送(${this.codeNum})`
			this.sendCode()
		},
		methods: {
			//点击验证码发送
			sendCode() {
				//随机生成验证码
				this.code = NaN//每次发送验证码，上次的验证码会失效
				//五分钟后验证码失效
				setTimeout(()=>{
					this.code = NaN
				},18000000)
				let code = Math.floor(Math.random()*9000+1000)
				this.code = code
				//请求接口返回验证码
				uni.request({
					url: "http://dfsns.market.alicloudapi.com/data/send_sms",
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						'Authorization':'APPCODE b44e5ef6db81492490a354db1efba8ff'
					},
					data: {
						content: `code:${this.code}`,
						phone_number: this.phone,
						template_id: 'TPL_0000'
					}
				}).then(res => {
					if(res.statusCode=='403'){
						uni.showToast({
							title:"请勿频繁获取验证码",
							icon:"none"
						})
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
				//验证码倒计时
				this.disabled = true
				let timer = setInterval(() => {
					--this.codeNum
					this.codeMsg = `重新发送(${this.codeNum})`
					if (!this.codeNum) {
						clearInterval(timer)
						this.disabled = false
						this.codeMsg = "重新发送"
						this.codeNum = 60
					}
				}, 1000)
			},
			goNextIndex() {
				//验证密码格式
				if(!this.validate("userPwd")) return
				//验证验证码是否正确
				if(this.userCode == this.code){
					//验证码正确
					//存储手机号和密码
					$http.request({
						url: "/user/setPwd",
						method: "POST",
						data: {
							userPwd:this.userPwd,
							phone:this.phone
						}
					}).then(res => {
						let data = res.data
						if(data.code){
							uni.showToast({
								title:data.msg,
								icon:"none"
							})
							this.$store.commit("login",data.data)
							//返回首页
							uni.reLaunch({
								url: "/pages/index/index"
							})
						}
					}).catch(err => {
						console.log(err);
						uni.showToast({
							title: "请求失败",
							icon: "none"
						})
					})
				}else{
					uni.showToast({
						title:"验证码错误",
						icon:"none"
					})
				}
			},
			//判断验证是否符合规则
			validate(key){
				let bool = true
				if(!this.rules[key].rule.test(this[key])){
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					bool = false
				}
				return bool
			},
		}
	}
</script>

<style lang="scss" scoped>
	.login-tel {
		width: 100vw;
		height: calc(100vh - 44px);
		/* #ifdef APP-PLUS */
		height: 100vh;
		/* #endif */

		.tel-main {
			padding: 0 20rpx;

			.tel {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #fff;
				background-color: #49bdfb;
				border-radius: 40rpx;
			}

			//表单
			.login-form {
				padding: 30rpx 0;

				.form-input {
					display: flex;
					box-sizing: border-box;
					align-items: baseline;
					border-bottom: 2rpx solid #f7f7f7;
					font-size: 32rpx;
					padding: 20rpx 0;
					height: 120rpx;

					.input-text {
						padding-right: 30rpx;
						/* #ifdef APP-PLUS */
						width: 120rpx;
						/* #endif */
					}

					input {
						font-size: 28rpx;
					}

					/* #ifdef APP-PLUS */
					.verification-code {
						width: 260rpx;
					}

					/* #endif */
				}
			}
		}
	}
</style>
